import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components'
import { Button, Tabs } from 'antd'
import moment from 'moment';
import { MomentInput } from 'moment';
import React, { useRef, useState } from 'react'
import Agree from './components/Agree';
import Refuse from './components/Refuse';
import Detail from './components/Detail';
import { application_list } from '@/services/sickbeds';

type GithubIssueItem = {
    start_time: MomentInput;
    id: number;
    type: string;
    name: string;
    time: string;
    zhiceng: string;
    plan_time: string;
    end_time: string;
    create_at: string;
    create_user: string;
};
const BedApplication = () => {
    const actionRef = useRef<ActionType>();
    const actionRef1 = useRef<ActionType>();
    // 存储当前记录id
    const [id, setId] = useState<number>()
    // 存储同意建床模态框的状态
    const [isAgreeModalOpen, setIsAgreeModalOpen] = useState(false)
    // 存储拒绝建床模态框的状态
    const [isRefuseModalOpen, setIsRefuseModalOpen] = useState(false)
    // 存储详情模态框的状态
    const [isDetailModalOpen, setIsDetailModalOpen] = useState(false)
    // 存储审批状态
    const [status, setStatus] = useState()


    // 控制同意建床模态框的显示与隐藏
    const isShowAgreeModal = (status: boolean) => {
        setIsAgreeModalOpen(status)
    }
    // 控制拒绝建床模态框的显示与隐藏
    const isShowRefuseModal = (status: boolean) => {
        setIsRefuseModalOpen(status)
    }
    // 控制详情模态框的显示与隐藏
    const isShowDetailModal = (status: boolean) => {
        setIsDetailModalOpen(status)
    }

    // 待审批病床申请列表
    const get_application_list = async (params: {
        pageSize?: number | undefined;
        current?: number | undefined;
        keyword?: string | undefined;
    }) => {
        //默认分页参数和后端接口字段不匹配
        let request_body = {
            ...params,
            was_approval: 0,
            current: params.current,
            pageSize: params.pageSize,
        };
        let res = await application_list(request_body)
        console.log('待审批申请列表', res);
        return {
            data: res.data.list,
            success: true,
            total: res.data.total_count,
        };
    }
    // 已审批病床申请列表
    const get_application_list1 = async (params: {
        pageSize?: number | undefined;
        current?: number | undefined;
        keyword?: string | undefined;
    }) => {
        //默认分页参数和后端接口字段不匹配
        let request_body = {
            ...params,
            was_approval: 1,
            current: params.current,
            pageSize: params.pageSize,
        };
        let res = await application_list(request_body)
        console.log('已审批申请列表', res);
        return {
            data: res.data.list,
            success: true,
            total: res.data.total_count,
        };
    }

    // 待审批列表字段
    const columns: ProColumns<GithubIssueItem>[] = [
        {
            title: '序号',
            dataIndex: 'index',
            valueType: 'index',
            hideInSearch: true,
            align: 'center',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            align: 'center',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            align: 'center',
            hideInSearch: true,
            valueEnum: {
                0: {
                    text: '未知',
                },
                1: {
                    text: '男',
                },
                2: {
                    text: '女',
                },
            },
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '联系方式',
            key: 'phone',
            dataIndex: 'phone',
            align: 'center',
            hideInSearch: true
        },
        {
            title: '申请人',
            dataIndex: 'type',
            hideInSearch: true,
            align: 'center',
            valueEnum: {
                1: {
                    text: "自己"
                },
                2: {
                    text: '家属'
                }
            }
        },
        {
            title: '是否有住院史',
            dataIndex: 'was_hospitalization',
            hideInSearch: true,
            align: 'center',
            valueEnum: {
                0: {
                    text: '否',
                },
                1: {
                    text: '是',
                },
            },
        },
        {
            title: '病史',
            key: 'medical_history',
            dataIndex: 'medical_history',
            align: 'center',
        },
        {
            title: '申请时间',
            dataIndex: 'create_time',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '操作',
            hideInSearch: true,
            align: 'center',
            render: (_: any, record: any) => [
                <Button
                    key="agree"
                    type="link"
                    onClick={() => {
                        setId(record.id)
                        isShowAgreeModal(true)
                    }}
                >
                    同意
                </Button>,
                <Button
                    key="refuse"
                    type="link"
                    onClick={() => {
                        setId(record.id)
                        isShowRefuseModal(true)
                    }}
                >
                    拒绝
                </Button>,
            ],
        },
    ];
    // 已审批列表字段
    const columns1: ProColumns<GithubIssueItem>[] = [
        {
            title: '序号',
            dataIndex: 'index',
            valueType: 'index',
            hideInSearch: true,
            align: 'center',
        },
        {
            title: '姓名',
            dataIndex: 'name',
            align: 'center',
        },
        {
            title: '性别',
            dataIndex: 'sex',
            key: 'sex',
            align: 'center',
            hideInSearch: true,
            valueEnum: {
                0: {
                    text: '未知',
                },
                1: {
                    text: '男',
                },
                2: {
                    text: '女',
                },
            },
        },
        {
            title: '年龄',
            dataIndex: 'age',
            key: 'age',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '联系方式',
            key: 'phone',
            dataIndex: 'phone',
            align: 'center',
            hideInSearch: true
        },
        {
            title: '申请人',
            dataIndex: 'type',
            hideInSearch: true,
            align: 'center',
            valueEnum: {
                1: {
                    text: "自己"
                },
                2: {
                    text: '家属'
                }
            }
        },
        {
            title: '是否有住院史',
            dataIndex: 'was_hospitalization',
            hideInSearch: true,
            align: 'center',
            valueEnum: {
                0: {
                    text: '否',
                },
                1: {
                    text: '是',
                },
            },
        },
        {
            title: '病史',
            key: 'medical_history',
            dataIndex: 'medical_history',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '申请时间',
            dataIndex: 'create_time',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: "状态",
            key: 'status',
            dataIndex: 'status',
            align: 'center',
            valueType: 'select',
            valueEnum: {
                1: {
                    text: '已同意'
                },
                2: {
                    text: "已拒绝"
                }
            }

        },
        {
            title: '操作',
            hideInSearch: true,
            align: 'center',
            render: (_: any, record: any) => [
                <Button
                    key="info"
                    type="link"
                    onClick={() => {
                        setId(record.id)
                        setStatus(record.status)
                        isShowDetailModal(true)
                    }}
                >
                    详情
                </Button>,
            ],
        },
    ];
    // 切换tab
    const changeTab = (key: string) => {
        if (key == '待审批') {
            actionRef.current?.reload();
        } else if (key == '已审批') {
            actionRef1.current?.reload();
        }
    };
    return (
        <PageContainer breadcrumb={false}>
            <Tabs
                defaultActiveKey="待审批"
                onChange={changeTab}
                items={[
                    {
                        key: '待审批',
                        label: '待审批',
                        children: (
                            <>
                                <ProTable<GithubIssueItem>
                                    columns={columns}
                                    actionRef={actionRef}
                                    request={async (params = {}) => get_application_list(params)}
                                    rowKey={(record) => record.id}
                                    search={{
                                        labelWidth: 'auto',
                                    }}
                                    options={{
                                        setting: {
                                            listsHeight: 400,
                                        },
                                    }}
                                    pagination={{
                                        pageSize: 10,
                                    }}
                                    dateFormatter="string"
                                    headerTitle="待审批列表"
                                />
                            </>
                        ),
                    },
                    {
                        key: '已审批',
                        label: '已审批',
                        children: (
                            <ProTable<GithubIssueItem>
                                columns={columns1}
                                actionRef={actionRef1}
                                request={async (params = {}) => get_application_list1(params)}
                                rowKey={(record) => record.id}
                                search={{
                                    labelWidth: 'auto',
                                }}
                                options={{
                                    setting: {
                                        listsHeight: 400,
                                    },
                                }}
                                pagination={{
                                    pageSize: 10,
                                }}
                                dateFormatter="string"
                                headerTitle="已审批列表"
                            />
                        ),
                    },
                ]}
            />
            {/* 同意建床模态框 */}
            {
                isAgreeModalOpen ? <Agree isAgreeModalOpen={isAgreeModalOpen} isShowAgreeModal={isShowAgreeModal} id={id} actionRef={actionRef}></Agree> : ""
            }
            {/* 拒绝建床模态框 */}
            {
                isRefuseModalOpen ? <Refuse isRefuseModalOpen={isRefuseModalOpen} isShowRefuseModal={isShowRefuseModal} id={id} actionRef={actionRef}></Refuse> : ""
            }
            {/* 详情 */}
            {
                isDetailModalOpen ? <Detail isDetailModalOpen={isDetailModalOpen} isShowDetailModal={isShowDetailModal} id={id} actionRef1={actionRef1} status={status}></Detail> : ""
            }
        </PageContainer>
    )
}
export default BedApplication